<template>
  <t-layout class="layout">
    <!-- 顶部导航 -->
    <t-header class="header">
      <div class="logo">
        <img src="../assets/logo.png" alt="Logo" />
        <h1>贵州四季康养管理系统</h1>
      </div>
      <div class="header-operations">
        <t-space>
          <t-popup content="消息通知" trigger="hover">
            <t-badge count="6" dot>
              <t-button theme="default" shape="square" variant="text">
                <t-icon name="notification" />
              </t-button>
            </t-badge>
          </t-popup>
        <t-dropdown :options="userOptions" @click="handleUserDropdown">
            <t-space>
              <t-avatar size="small">{{ userInfo.name?.substring(0, 1) || 'A' }}</t-avatar>
              <span>{{ userInfo.name || '管理员' }}</span>
              <t-icon name="chevron-down" />
            </t-space>
        </t-dropdown>
        </t-space>
      </div>
    </t-header>
    
    <t-layout>
      <!-- 侧边菜单 -->
      <t-aside class="aside" :width="220">
        <t-menu theme="light" :value="activeMenu" @change="changeMenu">
          <t-menu-item value="dashboard" to="/dashboard">
            <template #icon>
              <t-icon name="dashboard" />
            </template>
            控制台
          </t-menu-item>
          
          <t-submenu value="content" title="内容管理">
            <template #icon><t-icon name="app" /></template>
            <t-menu-item value="articles" to="/content/articles">文章管理</t-menu-item>
            <t-menu-item value="banners" to="/content/banners">轮播图管理</t-menu-item>
            <t-menu-item value="spots" to="/content/spots">景点管理</t-menu-item>
          </t-submenu>
          
          <t-menu-item value="users" to="/users">
            <template #icon>
              <t-icon name="user-circle" />
            </template>
            用户管理
          </t-menu-item>
          
          <t-menu-item value="orders" to="/orders">
            <template #icon>
              <t-icon name="shop" />
            </template>
            订单管理
          </t-menu-item>
          
          <t-menu-item value="stats" to="/stats">
            <template #icon>
              <t-icon name="chart" />
            </template>
            数据统计
          </t-menu-item>
        </t-menu>
      </t-aside>
      
      <!-- 主内容区 -->
      <t-layout class="content-layout">
        <!-- 面包屑 -->
        <div class="breadcrumb-container">
          <t-breadcrumb>
          <t-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index" :to="item.path">
            {{ item.title }}
          </t-breadcrumb-item>
        </t-breadcrumb>
        </div>
        
        <!-- 页面内容 -->
        <t-content class="content-container">
          <router-view />
        </t-content>
        
        <!-- 页脚 -->
        <t-footer class="footer">
          贵州四季康养管理系统 &copy; 2024
        </t-footer>
      </t-layout>
    </t-layout>
  </t-layout>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getUserInfo, logout } from '../api/auth'

const route = useRoute()
const router = useRouter()

const userInfo = ref<any>({
  name: '系统管理员',
  avatar: '',
})

const userOptions = [
  { content: '个人中心', value: 'profile' },
  { content: '修改密码', value: 'password' },
  { content: '退出登录', value: 'logout' }
]

const activeMenu = computed(() => {
  const path = route.path
  if (path === '/') return 'dashboard'
  
  const firstLevel = path.split('/')[1]
  if (firstLevel) return firstLevel
  
  if (path.startsWith('/content/')) {
    return path.split('/')[2]
  }
  
  return ''
})

const breadcrumbs = computed(() => {
  const result = [{ title: '首页', path: '/dashboard' }]
  
  if (route.meta.title) {
    if (route.meta.parentTitle) {
      result.push({
        title: route.meta.parentTitle as string, 
        path: route.meta.parentPath as string 
      })
    }
    
    result.push({
      title: route.meta.title as string,
      path: route.fullPath
  })
  }
  
  return result
})

const changeMenu = (value: string) => {
  console.log('Menu changed:', value)
}

const handleUserDropdown = (data: { value: string }) => {
  switch (data.value) {
    case 'profile':
      router.push('/profile')
      break
    case 'password':
      router.push('/change-password')
      break
    case 'logout':
      handleLogout()
      break
  }
}

const handleLogout = async () => {
  try {
    await logout()
    localStorage.removeItem('token')
    router.push('/login')
  } catch (error) {
    console.error('退出登录失败', error)
  }
}

const fetchUserInfo = async () => {
  try {
    const data = await getUserInfo()
    if (data && typeof data === 'object') {
      userInfo.value = data
    }
  } catch (error) {
    console.error('获取用户信息失败', error)
  }
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.layout {
  height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background-color: white;
  border-bottom: 1px solid #dcdcdc;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 32px;
  margin-right: 12px;
}

.logo h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #0052D9;
}

.aside {
  border-right: 1px solid #dcdcdc;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.content-layout {
  padding: 0;
  background: #F7F9FC;
}

.breadcrumb-container {
  padding: 16px 24px;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.content-container {
  padding: 24px;
  overflow-y: auto;
  height: calc(100vh - 64px - 52px - 48px);
}

.footer {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: #999;
  font-size: 12px;
  border-top: 1px solid #dcdcdc;
}
</style> 